import React from 'react';
import classNames from 'classnames';
import './index.less';

class TimeLine extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      timeEvents: [
        {
          time: "2018-10-19",
          amount: "445.54",
          capital: "416.66",
          interest: "28.88",
          status: 2
        },
        {
          time: "2018-11-19",
          amount: "445.54",
          capital: "416.66",
          interest: "28.88",
          status: 1
        },
        {
          time: "2019-1-19",
          amount: "445.54",
          capital: "416.66",
          interest: "28.88",
          status: 1
        },
        {
          time: "2019-2-19",
          amount: "445.54",
          capital: "416.66",
          interest: "28.88",
          status: 1
        }
      ]
    };
  }

  render() {
    //年

    //月
    const RenderMonth = this.state.timeEvents.map((item, index) => {
      const num = index + 1;

      let cls = item.status === 1 ? 'tOver tMonth' : 'tMonth';
      return (
        <div key={index} className={cls}>
          <div className={'tDate'}>
            <div className={'tNum'}>第{num}期</div>
            <div className={'tTime'}>{item.time}</div>
          </div>
          <div className={'tIntro'}>
            <div className={'tTitle'}>{(item.status === 1) ? '你的本期贷款已还' : '你的本期贷款未还'}</div>
            <div className={'tDesc'}>
              <p>总金额：{item.amount}</p>
              <p>本金：{item.capital}</p>
              <p>利息：{item.interest}</p>
            </div>
          </div>
        </div>
      )
    });
    return (
      <div className={'timeline'}>
        {RenderMonth}
      </div>
    )
  }
}

TimeLine.propTypes = {};

export default TimeLine;
